<script setup>
//引入原生ref
import { ref } from "vue";
//引入api接口
import { selectAuditPage, updateAudit, updateSuccess,
  updateError, deleteAudit, insertAudit} from "@/api/audit/adminaudit.js";
//引入提示
import { ElMessage } from "element-plus";
//引入文件组件
import FileUpload from "@/components/FileUpload/index.vue";
//引入图片组件
import ImageUpload from "@/components/ImageUpload/index.vue";
//定义查询对象
const queryParams = ref({
  size:8,
  current:1,
  total:0,
  content:"",
  auditStatus:"",
});
//重置查询数据
function resetQuery(){
  queryParams.value = {  size:8,
    current:1,
    total:0,
    content:"",
    auditStatus:"",};
  //查询
  getList();
}
//定义展示数据集合
const auditList = ref([]);
//定义加载
const loading = ref(false);
//查询数据
function getList(){
  loading.value = true;
  selectAuditPage(queryParams.value).then((res)=>{
    //赋值展示数据
    auditList.value = res.data.records;
    //赋值总行数
    queryParams.value.total = res.data.total;
    loading.value = false;
  });
}
//获取数据
getList();
//行数更变
function handleSizeChange(size){
  console.log(size)
  //重置到第一行
  queryParams.value.current = 1;
  //赋值数据
  queryParams.value.size = size;
  //调用查询
  getList();
}
//页码更变
function handleCurrentChange(index){
  console.log(index)
  //赋值数据
  queryParams.value.current = index;
  //调用查询
  getList();
}

//定义修改对象
const updateObj = ref({});
//重置修改对象
function resetUpdateObj(){
  updateObj.value.content = "";
  updateObj.value.imgFile = "";
  updateObj.value.audioFile = "";
  updateObj.value.auditStatus = "";
}
//定义修改弹窗
const updateDialog = ref(false);
//打开弹窗
function openUpdateDialog(ele){
  //打开弹窗
  updateDialog.value = true;
  //赋值展示数据
  updateObj.value = ele;
  updateObj.value.auditStatus = updateObj.value.auditStatus.toString();
}
//定义修改方法
function handelUpdate(){
  updateAudit(updateObj.value).then((res)=>{
    //关闭弹窗
    updateDialog.value = false;
    //刷新表格
    getList();
    //弹出提示
    ElMessage.success(res.msg);
  })
}

//审核通过方法
function handleSuccess(id){
  updateSuccess(id).then((res)=>{
    //刷新表格
    getList();
  })
}

//审核失败方法
function handleError(id){
  updateError(id).then((res)=>{
    //刷新表格
    getList();
  })
}

//审核删除方法
function handleDelete(id){
  deleteAudit(id).then((res)=>{
    //刷新表格
    resetQuery();
    //弹出提示
    ElMessage.success(res.msg);
  })
}

//定义新增对象
const InsertObj = ref({
  content:"",
  imgFile:"",
  audioFile:"",
  auditStatus:""
}
);
//重置新增对象
function resetInsertObj(){
  InsertObj.value = {
    content:"",
    imgFile:"",
    audioFile:"",
    auditStatus:""
  }
}
//定义新增弹窗
const InsertDialog = ref(false);
//定义打开弹窗方法
function openInsertDialog(){
  //打开弹窗
  InsertDialog.value = true;
  //重置新增对象
  resetInsertObj();
}
//新增方法
function handleInsert(){
  insertAudit(InsertObj.value).then((res)=>{
    //关闭弹窗
    InsertDialog.value = false;
    //重置对象
    resetInsertObj();
    //刷新表格
    getList();
  })
}


</script>

<template>
  <div>
    <el-card shadow="never" class="border-0">
      <el-form inline>
        <el-form-item label="文本内容" prop="content">
            <el-input placeholder="请输入文本内容" style="width: 200px" v-model="queryParams.content"/>
        </el-form-item>

        <el-form-item label="审核状态" prop="auditStatus">
          <el-select v-model="queryParams.auditStatus" placeholder="请选择状态" style="width: 180px">
            <el-option value="1" label="待审核"></el-option>
            <el-option value="2" label="审核通过"></el-option>
            <el-option value="3" label="审核拒绝"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button icon="Refresh" type="info" plain @click="resetQuery()">重置</el-button>
          <el-button icon="Search" type="primary" plain @click="getList()">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-tag @click="openInsertDialog()">新增</el-tag>
    </el-card>
  </div>

  <div>
    <el-card shadow="never" class="border-0">
      <el-table :data="auditList" border v-loading="loading">
        <el-table-column label="序列" width="80" align="center">
          <template #default="scope">
            {{scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column prop="sysUser.userName" label="提交用户" align="center"></el-table-column>
        <el-table-column prop="content" label="文本内容" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column label="图片文件" align="center" show-overflow-tooltip>
          <template #default="scope">
            {{scope.row.imgFile}}
          </template>
        </el-table-column>
        <el-table-column label="音频文件" align="center" show-overflow-tooltip>
          <template #default="scope">
            {{scope.row.audioFile}}
          </template>
        </el-table-column>
        <el-table-column prop="addStatus" label="审核状态" align="center">
          <template #default="scope">
            <!--            {{scope.row}}-->
            <el-tag type="primary" v-if="scope.row.auditStatus == 1">待审核</el-tag>
            <el-tag type="success"  v-if="scope.row.auditStatus == 2">审核通过</el-tag>
            <el-tag type="danger" v-if="scope.row.auditStatus == 3">审核拒绝</el-tag>
          </template>
        </el-table-column>


        <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-popconfirm title="真的要删除吗?" confirmButtonText="确认" cancelButtonText="取消" @confirm="handleDelete(scope.row.id)">
              <template #reference>
                <el-tag type="danger">删除</el-tag>
              </template>
            </el-popconfirm>
            &nbsp;&nbsp;
            <el-tag type="warning" @click="openUpdateDialog(scope.row)">编辑</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     v-model:page-size="queryParams.size" :page-sizes="[8, 16, 24,32]"
                     layout="total, sizes, prev, pager, next" v-model:total="queryParams.total" style="float:right;">
      </el-pagination>
    </el-card>
  </div>


  <div>
    <el-dialog title="编辑审核" v-model="updateDialog">
<!--      {{ updateObj }}-->
      <el-form label-width="120px">

        <el-col :span="12">
          <el-form-item label="文本内容">
            <el-input v-model="updateObj.content" type="textarea"/>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="审核状态">
              <el-select v-model="updateObj.auditStatus" placeholder="请选择状态" style="width: 180px">
                <el-option value="1" label="待审核"></el-option>
                <el-option value="2" label="审核通过"></el-option>
                <el-option value="3" label="审核拒绝"></el-option>
              </el-select>
          </el-form-item>
        </el-col>


        <el-col :span="24">
          <el-form-item label="图片内容">
            <ImageUpload v-model="updateObj.imgFile"/>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="音频内容">
            <FileUpload v-model="updateObj.audioFile"/>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <center>
            <el-button icon="Refresh" type="info" plain>重置</el-button>
            <el-popconfirm title="真的要修改吗?" confirmButtonText="确认" cancelButtonText="取消" @confirm="handelUpdate()">
              <template #reference>
                <el-button icon="SuccessFilled" type="warning" plain>修改</el-button>
              </template>
            </el-popconfirm>

          </center>
        </el-col>
      </el-form>
    </el-dialog>
  </div>

  <div>
    <el-dialog v-model="InsertDialog" title="添加">
      <el-form label-width="120px">
        <el-col :span="12">
          <el-form-item label="文本内容">
            <el-input v-model="InsertObj.content" type="textarea"/>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="图片内容">
            <ImageUpload v-model="InsertObj.imgFile"/>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="音频内容">
            <FileUpload v-model="InsertObj.audioFile"/>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <center>
            <el-button icon="Refresh" type="info" plain @click="resetInsertObj()">重置</el-button>
            <el-button icon="SuccessFilled" type="primary" plain @click="handleInsert()">添加</el-button>
          </center>
        </el-col>
      </el-form>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">

</style>